<template>
  <div>
    <!-- 头部标签导航 -->
    <div class="tags">
      <ul class="nav">
        <li class="nav-item" v-for="(item,i) in tabs" :key="i">
          <span class="nav-link"  @click="goTabs(i,item.tab)" :class="tabIndex==i?'active':''">{{item.title}}</span>
        </li>
      </ul>
    </div>

    <!-- 渲染列表 -->
    <List  />
   
  </div>
</template>
<script>
import List from './List'
import {tabs} from '../../tab'

export default {
  name: "",
  data(){
    return{
      tabs:'',
      tabIndex:0
    }
  },
  created(){
   this.tabs=tabs
  },
  methods:{
   goTabs(i,tab){
     this.tabIndex=i;
    this.$children[0].tab=tab
     this.$children[0].finished = false;
    this.$children[0].loading = true;
    this.$children[0].list=''
    this.$children[0].Load()
   }
  },
  components:{List}
  
};
</script>
<style  scoped>
.nav-link {
  color: #80bd01;
  cursor: pointer;
}

.tags {
  background: #f6f6f6;
}

.nav-item span.active{
  color: #fff;
  background: #80bd01;
  border-radius: 5px
}
</style>